<template>
  <div class="mnt-dialog form-container">
    <el-form ref="form" :model="forgtPwd3" label-width="200px" :rules="rules" class="forgt-pwd1-container">
      <el-row :gutter="12">
        <el-col :span="16" :offset="4">
          <p class="tip">请设置新密码，建议使用数字、字母的8-10位组合。</p>
          <el-tooltip v-model="capsTooltip" content="大写键已开" placement="right" manual>
            <el-form-item prop="newPassword">
              <el-input
                :key="passwordType"
                ref="password"
                v-model="forgtPwd3.newPassword"
                name="password"
                @blur="capsTooltip = false"
              />
              <!--<span class="show-pwd" @click="showPwd">
                <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
              </span>-->
            </el-form-item>
          </el-tooltip>
        </el-col>
      </el-row>
      <el-row :gutter="10" style="margin-top: 10px">
        <el-col :span="16" :offset="4">
          <el-button type="primary" :disabled="!forgtPwd3.newPassword" class="forgtPwd1Btn" @click="Next3">确定</el-button>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
// import md5 from 'js-md5'
export default {
  name: 'ForgtPwd3',
  props: ['telphone'],
  data() {
    return {
      forgtPwd3: {
        newPassword: ''
      },
      capsTooltip: false,
      passwordType: 'password',
      rules: {}
    }
  },
  mounted() {
    this.$form = this.$refs.form
    // this.initRules()
  },
  methods: {
    initRules() {
      this.rules = {
        newPassword: [{
          required: false, validator(rule, value, cb) {
            const reg = /^(?:(?=.*[0-9].*)(?=.*[A-Za-z].*)(?=.*[,\.#%'\+\*\-:;^_`].*))[,\.#%'\+\*\-:;^_`0-9A-Za-z]{8,10}$/
            if (!(reg.test(value))) {
              return cb('请使用数字、字母、字符的8-10位组合密码!')
            }
            cb()
          }
        }]
      }
      this.$nextTick(() => {
        this.$form.clearValidate()
      })
    },
    Next3() {
      this.$refs.form.validate(valid => {
        if (valid) {
          const pwd = this.forgtPwd3.newPassword
          const param = {
            mobile: this.telphone,
            newPassword: pwd // md5(pwd)
          }
          this.get('/login/resettingPassword', param).then(res => {
            this.$emit('nextClick')
          })
        }
      })
    },
    showPwd() {
      if (this.passwordType === 'password') {
        this.passwordType = ''
      } else {
        this.passwordType = 'password'
      }
      this.$nextTick(() => {
        this.$refs.password.focus()
      })
    }
  }
}
</script>
<style lang="scss" scoped>
  $dark_gray:#889aa4;
  .show-pwd {
    position: absolute;
    right: 10px;
    font-size: 16px;
    color: $dark_gray;
    cursor: pointer;
    user-select: none;
    top: 50%;
    transform: translateY(-50%);
  }
</style>
